<http>
	<head>
		<link href="test.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>
	<body>
		<div id="image-container">
			<div id="raw-image-container">
				<img src="2008-jesus-cambridge-lores.jpeg">
			</div>
			<div id="mouseover-container">
			</div>
		</div>
		<script type="text/javascript">
		var w=1223;
		var h=573;

		/*Need to collect the vertices from the faces by clicking*/

		var faces = [];


		var svg_temp = d3.select("#mouseover-container")
			.append("svg:svg")
				.attr("id", "temp")
				.attr("width", w)
				.attr("height", h)
				.on("mousedown", mousedown);

		function mousedown() {
			var facesSvg = svg_temp.selectAll(".face")
			var point = d3.mouse(this),
			    face = {x:point[0], y:point[1]};
			faces.push(face);
			facesSvg = facesSvg.data(faces);
			facesSvg.enter().insert("circle")
				.attr("r", 2)
				.attr("class", "face")
				.attr("cx", point[0])
				.attr("cy", point[1])
				.attr("id", "face" + (faces.length -1));
		}

		d3.select("body")
			.on("keydown", function(){
				d3.select("#face" + (faces.length -1)).remove();
				faces.pop();
			});

		function draw_voronoi(vertices){

		var vertices=d3.range(100).map(function(d) {
			return [Math.random() *w, Math.random() *h];
		});

		var svg = d3.select("#mouseover-container")
			.append("svg:svg")
				.attr("width", w)
				.attr("height", h);
		var paths, points, clips;
		clips = svg.append("svg:g").attr("id", "point-clips");
		points = svg.append("svg:g").attr("id", "points");
		paths = svg.append("svg:g").attr("id", "point-paths");

		clips.selectAll("clipPath")
				.data(vertices)
			.enter().append("svg:clipPath")
				.attr("id", function(d, i) { return "clip-"+i;})
			.append("svg:circle")
				.attr('cx', function(d) { return d[0]; })
				.attr('cy', function(d) { return d[1]; })
				.attr('r', 20);

		paths.selectAll("path")
				.data(d3.geom.voronoi(vertices))
			.enter().append("svg:path")
				.attr("d", function(d) { return "M" + d.join(",") + "Z"; })
				.attr("id", function(d,i) { 
					return "path-"+i; })
				.attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; })
				.style("fill", d3.rgb(230, 230, 230))
				.style('fill-opacity', 0.4)
				.style("stroke", d3.rgb(200,200,200));

		paths.selectAll("path")
			.on("mouseover", function(d, i) {
				d3.select(this)
					.style('fill', d3.rgb(31, 120, 180));
				svg.select('circle#point-'+i)
					.style('fill', d3.rgb(31, 120, 180))
			})
			.on("mouseout", function(d, i) {
				d3.select(this)
					.style("fill", d3.rgb(230, 230, 230));
				svg.select('circle#point-'+i)
					.style('fill', 'white')
			});

		points.selectAll("circle")
				.data(vertices)
			.enter().append("svg:circle")
				.attr("id", function(d, i) { 
					return "point-"+i; })
				.attr("transform", function(d) { return "translate(" + d + ")"; })
				.attr("r", 2)
				.attr('stroke', 'none');
		}
		</script>
	</body>
</http>
